<template>
	<view class="container files-add-container">
		<view class="yuan-form">
			<view class="form-title">基础信息</view>
			<view class="yuan-form-list">
				<view class="yuan-form-label yuan-label-must">昵称:</view>
				<input class="yuan-input" placeholder-class="placeholder-style" v-model="formData.name"
					placeholder="请输入昵称" />

			</view>
			<view class="yuan-form-list">
				<view class="yuan-form-label yuan-label-must">性别:</view>
				<picker class="yuan-form-picker" mode="selector" :range="sexArr" @change="bindSexChange">
					<view class="yuan-picker-row">
						<view class="yuan-input" v-if="formData.gender">{{formData.gender}}</view>
						<view class="placeholder-style" v-else>请选择性别</view>
						<text class="iconfont">&#xe775;</text>
					</view>
				</picker>

			</view>
			<view class="yuan-form-list">
				<view class="yuan-form-label yuan-label-must">年龄:</view>
				<input class="yuan-input" placeholder-class="placeholder-style" v-model="formData.age"
					placeholder="请输入患者年龄" />

			</view>
			<!-- <view class="yuan-form-list">
				<view class="yuan-form-label yuan-label-must">手机号码:</view>
				<input class="yuan-input" placeholder-class="placeholder-style" v-model="formData.phone"
					placeholder="请输入您的手机号" />

			</view> -->
		</view>
		<view class="yuan-form">
			<view class="form-title">健康信息</view>
			<view class="yuan-form-list">
				<view class="yuan-form-label yuan-label-must">肝功能异常:</view>
				<view class="page-radio">
					<view @click="formData.liver='无'">
						<text class="iconfont" style="color: #3AD3C1;" v-if="formData.liver==='无'">&#xe63b;</text>
						<text class="iconfont" v-else>&#xe640;</text>
						<text class="radio-label">无</text>
					</view>
					<view @click="formData.liver='有'">
						<text class="iconfont" style="color: #3AD3C1;" v-if="formData.liver==='有'">&#xe63b;</text>
						<text class="iconfont" v-else>&#xe640;</text>
						<text class="radio-label">有</text>
					</view>
				</view>

			</view>
			<view class="yuan-form-list">
				<view class="yuan-form-label yuan-label-must">肾功能异常:</view>
				<view class="page-radio">
					<view @click="formData.kidney='无'">
						<text class="iconfont" style="color: #3AD3C1;" v-if="formData.kidney==='无'">&#xe63b;</text>
						<text class="iconfont" v-else>&#xe640;</text>
						<text class="radio-label">无</text>
					</view>
					<view @click="formData.kidney='有'">
						<text class="iconfont" style="color: #3AD3C1;" v-if="formData.kidney==='有'">&#xe63b;</text>
						<text class="iconfont" v-else>&#xe640;</text>
						<text class="radio-label">有</text>
					</view>
				</view>


			</view>
			<view class="yuan-form-row">
				<view style="display: flex;align-items: center;height: 94rpx;">
					<view class="yuan-form-label yuan-label-must">过敏史:</view>
					<view class="page-radio">
						<view @click="formData.allergy='无'">
							<text class="iconfont" style="color: #3AD3C1;" v-if="formData.allergy==='无'">&#xe63b;</text>
							<text class="iconfont" v-else>&#xe640;</text>
							<text class="radio-label">无</text>
						</view>
						<view @click="formData.allergy='有'">
							<text class="iconfont" style="color: #3AD3C1;" v-if="formData.allergy==='有'">&#xe63b;</text>
							<text class="iconfont" v-else>&#xe640;</text>
							<text class="radio-label">有</text>
						</view>
					</view>
				</view>

				<view class="allergy-list" v-if="formData.allergy==='有'">
					<view class="yuan-btn" :class="item.isSel?'btn-primary':'btn-default'" v-for="(item,idx) in allergy"
						:key="'allergy_'+idx" @click="allergy[idx].isSel=!allergy[idx].isSel">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="yuan-form-list">
				<view class="yuan-form-label yuan-label-must">家族病史:</view>
				<view class="page-radio">
					<view @click="formData.family='无'">
						<text class="iconfont" style="color: #3AD3C1;" v-if="formData.family==='无'">&#xe63b;</text>
						<text class="iconfont" v-else>&#xe640;</text>
						<text class="radio-label">无</text>
					</view>
					<view @click="formData.family='有'">
						<text class="iconfont" style="color: #3AD3C1;" v-if="formData.family==='有'">&#xe63b;</text>
						<text class="iconfont" v-else>&#xe640;</text>
						<text class="radio-label">有</text>
					</view>
				</view>

			</view>
		</view>
		<view class="page-bottom">
			<view class="yuan-btn btn-default" @click="clickCancel">取消</view>
			<view class="yuan-btn btn-primary" @click="clickSave">保存</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from "vue";
	import { onLoad } from "@dcloudio/uni-app"
	import userApi from "../../common/userApi";
	import { goBack, hideLoading, showLoading, showToast } from "../../common/util";
	const allergy = reactive([
		{ name: '青霉素', isSel: false },
		{ name: '头孢', isSel: false },
		{ name: '其他', isSel: false },
	])
	const formData = reactive<any>({})
	const sexArr = ['男', '女']
	const bindSexChange = (e : any) => {
		const idx = e.detail.value
		formData.gender = sexArr[idx]
	}
	const clickCancel = () => {
		goBack()
	}
	const pageId=ref('')
	onLoad((options) => {
		pageId.value = options.id || '';
	})
	const clickSave = async () => {
		const allergyArr = allergy.filter((item) => {
			return item.isSel === true
		})
		if(!formData.name){
			showToast('请输入昵称')
			return
		}
		if(!formData.gender){
			showToast('请输入性别')
			return
		}
		if(!formData.age){
			showToast('请输入年龄')
			return
		}
		if(!formData.liver){
			showToast('请选择是否有肝功异常')
			return
		}
		if(!formData.kidney){
			showToast('请选择是否有肾功异常')
			return
		}
		if(!formData.allergy){
			showToast('请选择是否有过敏史')
			return
		}
		if(!formData.family){
			showToast('请选择是否有家族病史')
			return
		}
		const data = {
			...formData,
			liverFunctionAbnormal: formData.liver === '有' ? true : false,
			kidneyFunctionAbnormal: formData.kidney === '有' ? true : false,
			allergyHistory: formData.allergy === '有' ? true : false,
			familyDiseaseHistory: formData.family === '有' ? true : false,
			allergyTypes: allergyArr.map(item => (item.name)),
			id:pageId.value
		}
		showLoading()
		try {
			console.info(pageId.value)
			if(pageId.value){
				await userApi.postHealthRecord(data)
			}else{
				await userApi.addHealthRecord(data)
			}
			showToast('保存成功',{},()=>{
				goBack()
			})
			
		} finally {
			hideLoading()
		}

	}
</script>

<style lang="scss">
	.files-add-container {
		background: linear-gradient(180deg, #DAFBFB 0%, #D7E5FF 8%, #F2F3F8 40%, #F2F3F8 100%);
		padding: 30rpx;
		padding-bottom: 120rpx;

		.yuan-form {
			background-color: #fff;
			padding: 25rpx;
			border-radius: 10rpx;
		}

		.form-title {
			font-size: 32rpx;
			color: #202020;
			font-weight: bold;
		}

		.yuan-form-label {
			min-width: 200rpx;
		}

		.page-radio {
			display: flex;
			align-items: center;
			line-height: 40rpx;

			.iconfont {
				font-size: 32rpx;
				display: inline-block;
				vertical-align: top;
			}
		}

		.radio-label {
			display: inline-block;
			min-width: 100rpx;
			font-size: 28rpx;
			color: #383838;
			margin-left: 10rpx;
		}

		.allergy-list {
			padding-bottom: 20rpx;

			.yuan-btn {
				width: 150rpx;
				display: inline-flex;
				height: 60rpx;
				border-radius: 60rpx;
				margin-right: 20rpx;
			}
		}

		.page-bottom {
			position: fixed;
			width: 100%;
			height: 170rpx;
			padding: 20rpx;
			padding-bottom: 50rpx;
			background-color: #fff;
			box-shadow: 0rpx -1rpx 4rpx 0rpx rgba(0, 0, 0, 0.1);
			bottom: 0;
			left: 0;
			z-index: 10;
			display: flex;
			justify-content: space-between;

			.yuan-btn {
				height: 80rpx;
				border-radius: 80rpx;
				width: 330rpx;
				display: inline-flex;
			}
		}
	}
</style>